<%-- 
   * 【描 述】：日志信息页面
   * 【环 境】：JAVA 1.7.0_13
   *  @author         柴志鹏  CHAIZP@GMAIL.COM
   *  @version        v1.0 2014-09-10
   *  @since          2014-09-10
 --%>
<%@ page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ include file="/include/head.jsp"%>
<%@ page import="com.czp.framework.listener.OnlineListener" %>
<html>
  <head>
    <title>日志信息</title>
    <style type="text/css">
    	.Group{background-image:url(../../images/icons/group.png)!important;}
    </style>
    <script type="text/javascript">
    	Ext.onReady(function(){
    		Ext.QuickTips.init();
	    	Ext.form.Field.prototype.msgTarget = 'qtip';
	    	
	    	var viewport = new Ext.Viewport({
	    		layout: 'fit',
	    		items: [
	    			new GridPanel({
				        id: 'grid',
			        	tbar: [
			        		new Ext.Button({
			        			text: '在线用户',
			        			iconCls: 'Group',
			        			handler: function() {
			        				onlineUsers();
			        			}
			        		}),
			        		'->','状态&nbsp;',
				        	new Ext.form.ComboBox({
					        	id: 'status',
					        	width: 80,
					        	store: new Ext.data.SimpleStore({
									fields: ['code', 'value'],
									data:[['0','登录成功'],['1','密码错误'],['2','用户禁用'],['3','登录失败']]
								}),
					        	valueField: 'code',
					        	displayField: 'value',
					        	mode: 'local',
					        	editable: false,
					        	triggerAction: 'all',
					        	listeners: {
						        	specialkey: function(field, event) {
						        		if(event.getKey() == SPECIALKEY_CODE_ENTER) {
											search();	        		
						        		}
						        	}	        		
					        	}
					        }),'&nbsp;时间&nbsp;',
			        		new Ext.form.DateField({
					        	id: 'startTime',
					        	width: 90,
					        	format: SHORT_DATE_FORMAT,
					        	triggerAction: 'all',
					        	editable: false,
					        	listeners: {
						        	specialkey: function(field,event) {
						        		if(event.getKey() == SPECIALKEY_CODE_ENTER) {
											search();
						        		}
						        	}
					        	}
					        }),'&nbsp;至&nbsp;',
					       	new Ext.form.DateField({
					        	id: 'endTime',
					        	width: 90,
					        	format: SHORT_DATE_FORMAT,
					        	triggerAction: 'all',
					        	editable: false,
					        	listeners: {
						        	specialkey: function(field,event) {
						        		if(event.getKey() == SPECIALKEY_CODE_ENTER) {
											search();
						        		}
						        	}
					        	}
					        }),'&nbsp;&nbsp;',
							new Ext.Button({
								text: '查询',
					        	iconCls: 'search',
					        	handler: function() {
					        		store.baseParams = {
					        			status: Ext.getCmp('status').getValue(),
										startTime: Ext.util.Format.date(Ext.getCmp('startTime').getValue(),SHORT_DATE_FORMAT),
										endTime: Ext.util.Format.date(Ext.getCmp('endTime').getValue(),SHORT_DATE_FORMAT)
									};
									store.reload({
										params: {
											start: PAGING_START_INDEX,
											limit: PAGING_PAGE_SIZE
										}
									});
					        	}
					        }),
					        new Ext.Button({
								text: '清空',
					        	iconCls: 'clear',
					        	handler: function() {
					        		Ext.getCmp('status').setValue('');
					        		Ext.getCmp('startTime').setValue('');
					        		Ext.getCmp('endTime').setValue('');
					        	}
						    })
			        	]
	    			})
	    		]
	    	});
	    	
    	});
    	
    	var store = null;
    	var GridPanel = Ext.extend(Ext.grid.GridPanel, {
    		constructor: function(config) {
    			store = new Ext.data.Store({//角色数据源
					proxy: new Ext.data.HttpProxy({
						url: 'LogAction!queryLogInfoList.do'
					}),
					reader: new Ext.data.JsonReader({
						totalProperty: 'total',
						root: 'list'
					}, new Ext.data.Record.create([
						{name: 'id'},
						{name: 'username'},
						{name: 'name'},
						{name: 'loginTime'},
						{name: 'ip'},
						{name: 'status'}
					])),
					remoteSort: false,//是否远程排序
					autoLoad: {
						params:{
							start: PAGING_START_INDEX,
							limit: PAGING_PAGE_SIZE
						}
					}
				});
		    	
		    	var model = new Ext.grid.CheckboxSelectionModel();
		    	var column = new Ext.grid.ColumnModel({
		    		id: 'column',
		    		defaults: {
		    			sortable: true,//默认全部列可排序
		    			align: 'center'
		    		},
		    		columns: [
		    			model,
		    			new Ext.grid.RowNumberer({
		    				id: 'rownum',
		    				header: '序号',
		    				width: 40
		    			}),{
		    				id: 'id',
		    				header: '主键Id',
		    				dataIndex: 'id',
		    				width: 50,
		    				hidden: true
		    			},{
		    				id: 'username',
		    				header: '用户名',
		    				dataIndex: 'username',
		    				width: 40
		    			},{
		    				id: 'name',
		    				header: '姓名',
		    				dataIndex: 'name',
		    				width: 40
		    			},{
		    				id: 'loginTime',
		    				header: '时间',
		    				dataIndex: 'loginTime',
		    				width: 60,
		    				renderer: Ext.util.Format.dateRenderer(DEFAULT_DATE_FORMAT)
		    			},{
		    				id: 'ip',
		    				header: 'ip',
		    				dataIndex: 'ip',
		    				width: 40
		    			},{
		    				id: 'status',
		    				header: '状态',
		    				dataIndex: 'status',
		    				align: 'left',
		    				width: 80,
		    				renderer: function(value, metadata, record, rowIndex, colIndex, store) {
		    					var str = value.split("|", 2);
				        		metadata.attr = 'ext:qtip="'+ str[1] +'"';
				        		return ['<span style="color:green;">'+str[1]+'</span>',
			        					'<span style="color:red;">'+str[1]+'</span>',
			        					'<span style="color:orange;">'+str[1]+'</span>',
			        					'<span style="color:pink;">'+str[1]+'</span>']
			        					[str[0]];
				        	}
		    			}
		    		]
		    	});
    			
		        config = Ext.apply({
		            id: this.id,
			        autoScroll: true,
				    store: store,
				    cm: column,
				    sm: model,
				    frame: false,
				    trackMouseOver: true,//鼠标经过痕迹
				    loadMask: true,
		        	loadMask: {msg: 'loading...'},
		        	viewConfig: {
		        		forceFit: true,//根据column进行百分比设置
		        		scrollOffset: 0//不加这个的话，会在grid的最右边有个空白，留作滚动条的位置。若不加默认为scrollOffset: 20
		        	},
		        	bbar: cf_getPagingToolbar(PAGING_PAGE_SIZE, store)
		        }, config);
		        GridPanel.superclass.constructor.call(this, config);
		    }
    	});
    	
    	/**
    	 * 当前在线用户 
    	 */
    	function onlineUsers() {
    		var ouStore = new Ext.data.Store({
				proxy: new Ext.data.HttpProxy({
					url: 'LogAction!queryOnlineUsers.do'
				}),
				reader: new Ext.data.JsonReader({
				}, new Ext.data.Record.create([
					{name: 'username'},
		        	{name: 'personName'},
				    {name: 'mobile'}
				])),
				remoteSort: false,//是否远程排序
				autoLoad: true
			});
    		
			var ouColumn = new Ext.grid.ColumnModel({
	    		defaults: {
					align: 'center',
		            sortable: true // 默认全部列可排序          
		        },
		        columns: [
		        	new Ext.grid.RowNumberer({
		        		id: 'rownum',
		        		header: '序号',
						width: 40
					}),{
		        		id: 'username',
						header: '用户名',
						dataIndex: 'username',
						width: 25
					},{
		        		id: 'personName',
			        	header: '姓名',
			        	dataIndex: 'personName',
			      		width: 25
			        },{
			        	id: 'mobile',
			        	header: '电话',
			        	dataIndex: 'mobile',
			        	width: 25
			        }
		        ]
		    });
	        var ouGrid = new Ext.grid.GridPanel({
	        	id: 'ouGrid',
		        autoScroll: true,
			    store: ouStore,
			    cm: ouColumn,
			    frame: false,
			    trackMouseOver: true,//鼠标经过痕迹
			    loadMask: true,
	        	loadMask: {msg: 'loading...'},
			    viewConfig: {
	        		forceFit: true,//根据column进行百分比设置
	        		scrollOffset: 0//不加这个的话，会在grid的最右边有个空白，留作滚动条的位置。若不加默认为scrollOffset: 20
	        	}
	        });
    		var win = new Ext.Window({
	            title: '在线人数：<%=OnlineListener.getSessions().size()%>',
	            layout: 'fit',
	            width: 320,
	            height: 360,
	            modal: true,
	            closeAction: 'close',
	            resizable: false,
	            items: ouGrid,
	            constrain: false,//禁止窗口移出浏览器
				constrainHeader: true,//禁止窗口移出浏览器
				buttonAlign: 'right'
	        });
	        win.show('logInfo');// 淡出窗口
    	}
    	
    	function search() {
			store.baseParams = {
				status: Ext.getCmp('status').getValue(),
				startTime: Ext.util.Format.date(Ext.getCmp('startTime').getValue(), SHORT_DATE_FORMAT),
				endTime: Ext.util.Format.date(Ext.getCmp('endTime').getValue(), SHORT_DATE_FORMAT)
			};
			store.reload({
	     		params:{
	     			start: PAGING_START_INDEX,
	     			limit: PAGING_PAGE_SIZE
	     		}
	     	});
	    }
    </script>
  </head>
  
  <body>
    <div id="logInfo"></div>
  </body>
</html>
